<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        ul{
            position: absolute;
            top: 320px;
            width: 20%;
            display: flex;
            justify-content: space-around;
            opacity: 0.3;
            margin: 0 auto;
        }

        ul li{
            background: #000000;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            list-style: none;
            z-index: 20;
        }
        .img{
            position: relative;
            top: 150px;
            display: flex;
            justify-content: center;
            align-content: center;
        }
    </style>
    <script>
        //当前的图片序号
        let count = 1;
        window.onload = function(){
            //获取图片元素
            let imgs = document.getElementById("imgs");
            //获取底部无序列表项
            let lis = document.getElementsByName("li");
            //设置定时任务

            imgs.onmouseleave=time;
            imgs.onmouseenter=time;


        };
        let intervals= setInterval(changeImg,2000);

        //换图片函数
        function changeImg() {
            if(count<5){
                count++;
                imgs.setAttribute("src","img/"+count+".jpg");
            }else {
                //超出数量后重置
                count=0;
                changeImg();
            }
        }

        //表示未清除定时
        let flag = false;
        //鼠标移除继续执行定时任务
        function time() {
            if(flag==false){
                clearInterval(intervals);
                flag=true;
            }else {
                intervals= setInterval(changeImg,2000);
                flag=false;
            }

        }
        //鼠标移入
        function  ulchange(a){
            clearInterval(intervals);
            imgs.setAttribute("src","img/"+a+".jpg");
            let id = document.getElementById("li"+a);
            id.style.background= "#4e6ef1";
        }

        //鼠标移除
        function lichange(a){
            imgs.setAttribute("src","img/"+a+".jpg");
            let id = document.getElementById("li"+a);
            id.style.background= "#000000";
        }

    </script>
</head>
<body>
<div class="img">
    <img src="img/1.jpg" id="imgs">
    <ul>
        <li id="li1" value="1" onmouseenter="ulchange(this.value)"  onmouseleave="lichange(this.value)"></li>
        <li id="li2" value="2" onmouseenter="ulchange(this.value)" onmouseleave="lichange(this.value)"></li>
        <li id="li3" value="3" onmouseenter="ulchange(this.value)" onmouseleave="lichange(this.value)"></li>
        <li id="li4" value="4" onmouseenter="ulchange(this.value)" onmouseleave="lichange(this.value)"></li>
        <li id="li5" value="5" onmouseenter="ulchange(this.value)" onmouseleave="lichange(this.value)"></li>
    </ul>
</div>


</body>

</html>